<template>
  <div>
    <sh-header :title="title"
               :leftText="leftText"
               :rightText="rightText"
               :barStyle="barStyle"
               :isTransparent="is_transparent"
               @left="bindLeft"
               @right="bindRight"
               @close="bindClose"
    ></sh-header>
    <sh-list title="参数">
      <sh-list-item>
        <template slot="left">
          标题title
        </template>
        <template slot="right">
          <input v-model="title">
        </template>
      </sh-list-item>
      <sh-list-item>
        <template slot="left">
          左侧文案leftText
        </template>
        <template slot="right">
          <input v-model="leftText">
        </template>
      </sh-list-item>
      <sh-list-item>
        <template slot="left">
          右侧文案rightText
        </template>
        <template slot="right">
          <input v-model="rightText">
        </template>
      </sh-list-item>
      <sh-list-item type="checkbox" v-model="barStyle" label="black">
        <template slot="left">
          颜色barStyle - 黑
        </template>
        <template slot="right">
        </template>
      </sh-list-item>
      <sh-list-item type="checkbox" v-model="is_transparent" :label="true">
        <template slot="left">
          是否透明is_transparent
        </template>
        <template slot="right">
        </template>
      </sh-list-item>
    </sh-list>
  </div>
</template>

<script>
  import utils from 'utils'

  export default {
    data() {
      return {
        title:'水UI - 头部组件',
        leftText:null,
        rightText:null,
        barStyle:'',
        is_transparent:false,
      }
    },
    beforeMount(){
    },
    mounted(){
    },
    methods:{
      bindLeft(){
        this.$toast.show('左侧点击事件');
      },
      bindRight(){
        this.$toast.show('右侧点击事件');
      },
      bindClose(){
        this.$toast.show('关闭事件');
      }
    },
    watch:{
      leftText(val){
        if(!val){
          this.leftText = null;
        }
      },
      rightText(val){
        if(!val){
          this.rightText = null;
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/utils";

</style>
